<template>
	<view class="big_page">
		<!-- 通讯录 -->
		<u-navbar back-icon-color="#fff" :is-back="true" :border-bottom="false" title="通讯录" title-color="#fff"
			:title-size="40">
			<!-- 搜索框 通讯录 -->
			<view class="searchView" slot="addressBook">
				<view class="search">
					<u-input v-model="keyWord" :clearable="true" placeholder="输入用户姓名" placeholder-style="paddingLeft:0"
						:custom-style="uInput1" :trim="true" />
					<view>
						<u-icon name="search" color="#fff" size="35"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		<!-- 人员列表 -->
		<view v-if="listData">
			<view class="personnel" v-for="(item,index) in itemList" :key="index" v-if="item.itemListData.length!=0">
				<view class="itemList_name">
					<view>{{item.name}}</view>
				</view>
				<u-collapse :body-style="bodyStyle">
					<u-collapse-item :title="item2.real_name" v-for="(item2, index2) in item.itemListData"
						:key="index2">
						<view class="itemTwo">
							<view class="context">
								<image class="icon-img icon-img-first" src="../../static/sex.png"></image>
								<text v-show="item2.gender == 1">男</text>
								<text v-show="item2.gender == 0">女</text>
							</view>
							<view class="context" @click="goPhone(item2.mobile)">
								<image class="icon-img" src="../../static/phone.png"></image>
								<text>{{item2.mobile}}</text>
							</view>
						</view>
						<view class="context">
							<image class="icon-img" src="../../static/department.png"></image>
							<text>{{item2.depart.title}}</text>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view v-else style="padding-top: 140rpx;">
			<u-empty text="无此联系人" mode="favor"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1-山东百瑞   2-泰山校区   3-烟台校区   4-淄博校区   5-产业事业部从   6-软件部   7-设计部
				itemList: { //遍历列表数据
					bairui: {
						name: "山东柏瑞",
						itemListData: []
					},
					MountTai: {
						name: "泰山校区",
						itemListData: []
					},
					yantai: {
						name: "烟台校区",
						itemListData: []
					},
					zibo: {
						name: "淄博校区",
						itemListData: []
					},
					IndustrialEnterprise: {
						name: "产业事业部",
						itemListData: []
					},
					software: {
						name: "软件部",
						itemListData: []
					},
					design: {
						name: "设计部",
						itemListData: []
					},
				},
				keyWord: '', //输入框的值
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},
				listData: true,
			}
		},
		methods: {
			goPhone(phone) { //点击电话号码后，拉起电话
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getData() { // 获取通讯录列表数据
				uni.showLoading({
					title: '正在加载...'
				})
				this.$http(this.$api.phoneBook, {
					real_name: this.keyWord
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: "加载成功",
						icon: "none",
						duration: 800,
					})
					// 1-山东百瑞   2-泰山校区   3-烟台校区   4-淄博校区   5-产业事业部从   6-软件部   7-设计部
					res.data.list.forEach((item) => {
						if (item.depart_id == 1) {
							this.itemList.bairui.itemListData.push(item)
						} else if (item.depart_id == 2) {
							this.itemList.MountTai.itemListData.push(item)
						} else if (item.depart_id == 3) {
							this.itemList.yantai.itemListData.push(item)
						} else if (item.depart_id == 4) {
							this.itemList.zibo.itemListData.push(item)
						} else if (item.depart_id == 5) {
							this.itemList.IndustrialEnterprise.itemListData.push(item)
						} else if (item.depart_id == 6) {
							this.itemList.software.itemListData.push(item)
						} else if (item.depart_id == 7) {
							this.itemList.design.itemListData.push(item)
						}
					})
					if (res.data.list.length != 0) {
						this.listData = true
					} else {
						this.listData = false
					}
					uni.stopPullDownRefresh()
				})
			},
			objectEmptyValue() { //每次请求前，先清空itemListData的值
				this.itemList.bairui.itemListData = []
				this.itemList.MountTai.itemListData = []
				this.itemList.yantai.itemListData = []
				this.itemList.zibo.itemListData = []
				this.itemList.IndustrialEnterprise.itemListData = []
				this.itemList.software.itemListData = []
				this.itemList.design.itemListData = []
			}
		},
		onLoad() {
			this.getData() //激活获取数据的方法
		},
		onPullDownRefresh() { //下拉刷新
			this.objectEmptyValue()
			this.getData()
		},
		watch: {
			keyWord() { //监视搜索框的值
				this.objectEmptyValue()
				this.getData()
			}
		}
	}
</script>

<style>
	/* 搜索框 */
	.searchView {
		padding: 15rpx 25rpx;
		box-shadow: 0 0 5px #c8c9cc;
		background-color: #fff;
	}

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #dfe2e55e;
		border-radius: 15px;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
	}

	u-input {
		width: 78%;
	}

	.search>view {
		width: 20%;
		text-align: center;
		background: linear-gradient(to right, #9C6CEE, #78AAE8);
	}

	.big_page {
		padding-bottom: 50rpx;
	}

	.big_page>view:nth-child(2) {
		margin-top: 120rpx;
	}

	/* 人员列表 */
	.personnel {
		margin: 25rpx 10px;
		padding: 20rpx 15px;
		box-shadow: 0 2px 5px #ccc;
		border-radius: 10px;
	}

	.itemList_name {
		/* 部门的名字 */
		font-size: 33rpx;
		font-weight: 900;
		padding: 10rpx 0;
		/* border-bottom: #c8c9cc 1rpx dashed; */
		margin-bottom: 10rpx;
	}

	.itemList_name>view {
		border-left: #78AAE8 8rpx solid;
		padding-left: 10rpx;
	}

	.itemTwo {
		display: flex;
		margin-bottom: 20rpx;
	}

	.itemTwo>view:first-child {
		margin-right: 160rpx;
	}

	.context {
		display: flex;
		align-items: center;
	}

	.context>u-icon {
		margin-right: 10px;
	}

	.icon-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.icon-img-first {
		transform: scale(1.5, 1.3)
	}

	.u-collapse-item:last-child {
		border: none;
	}

	u-collapse>view {
		margin: 0 20rpx;
	}

	/* 源码更改 */
	.u-collapse-item {
		border-bottom: #c8c9cc 1px dashed !important;
	}

	u-collapse-item:last-child>.u-collapse-item {
		border-bottom: none !important;
	}

	.u-collapse-head {
		padding: 35rpx 0 !important;
	}

	.u-collapse-body {
		padding: 0 15rpx;
	}
</style>
